<template>
  <Card>
    <div class="chart-container" ref="chartRef1"></div>
  </Card>
  <Card>
    <div class="chart-container" ref="chartRef2"></div>
  </Card>
  <Card>
    <div class="chart-container" ref="chartRef3"></div>
  </Card>
</template>

<script>
export default {
  name: 'Left',
}
</script>
<script setup>
// 1. 引入echarts
import echarts from "@/plugins/echarts";
import { onMounted, reactive, ref, watch } from "vue";
import Card from '@/components/Card/index.vue';

const barOption = reactive({

  title: {
    text: '各行业程序员数量',
    left: "center",
    top: 10,
    textStyle: {
      color: "#fff",
      fontSize: 12,
      fontWeight: "bolder",
    },
  },
  xAxis: {
    data: [],
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  yAxis: {
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  grid: {
    containLabel: true,
    left: 10,
    right: 10,
    bottom: 10,
    top: 40,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, .6)",
    textStyle: {
      color: "#fff",
      fontSize: 8,
    },
    borderWidth: 0,
    trigger: "axis",

    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: false,
  },

  series: {
    name: '金融行业',
    type: 'bar',
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: 3,
    },
  },
});

const lineOption = reactive({
  title: {
    text: '学习变化',
    left: "center",
    top: 10,
    textStyle: {
      color: "#fff",
      fontSize: 12,
      fontWeight: "bolder",
    },
  },
  xAxis: {
    data: [],
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  yAxis: {
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  grid: {
    containLabel: true,
    left: 10,
    right: 10,
    bottom: 10,
    top: 40,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, .6)",
    textStyle: {
      color: "#fff",
      fontSize: 8,
    },
    borderWidth: 0,
    trigger: "axis",
  },
  legend: {
    top: 10,
    right: 5,
    textStyle: {
      fontSize: 8,
      color: "#fff",
    },
    itemWidth: 15,
    itemHeight: 8,
  },

  series: [
    {
      name: '新增项目',
      type: 'line',
      data: [],
      smooth: true,
    },
    {
      name: '新增技能',
      type: 'line',
      data: [],
      smooth: true,
    },
  ],
});

const pieOption = reactive({

  title: {
    text: '工程师年龄分布',
    left: "center",
    top: 10,
    textStyle: {
      color: "#fff",
      fontSize: 12,
      fontWeight: "bolder",
    },
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  grid: {
    containLabel: true,
    left: 10,
    right: 10,
    bottom: 10,
    top: 40,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, .6)",
    textStyle: {
      color: "#fff",
      fontSize: 8,
    },
    borderWidth: 0,
    trigger: 'item',
    formatter: `{a}<br/>{b}: {c} ({d}%)`,
  },
  legend: {
    top: 'auto',
    bottom: 5,
    right: 5,
    left: 'center',
    itemWidth: 8,
    textStyle: {
      fontSize: 8,
      color: "#fff",
    },
    itemHeight: 8,
  },

  series: {
    name: '年龄分布',
    type: 'pie',
    data: [],
    radius: ['35%', '50%'],
    labelLine: {
      show: false,
    },
    label: {
      show: false,
    },
  },
});


const chartRef1 = ref()
const chartRef2 = ref()
const chartRef3 = ref()

const chart1Ref = ref()
const chart2Ref = ref()
const chart3Ref = ref()

onMounted(() => {

  chart1Ref.value = echarts.init(chartRef1.value);
  chart2Ref.value = echarts.init(chartRef2.value);
  chart3Ref.value = echarts.init(chartRef3.value);

  chart1Ref.value.setOption(barOption)
  chart2Ref.value.setOption(lineOption)
  chart3Ref.value.setOption(pieOption)

  setTimeout(() => {
    const result = {
      barXaxis: [
        '旅游行业',
        '游戏行业',
        '电商行业',
        '医疗行业',
        '金融行业',
        '教育培训',
        '餐饮行业',
      ],
      barSeriesData: [300, 200, 400, 250, 550, 450, 350],
      lineXaxis: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      line1SeriesData: [
        300, 200, 400, 250, 550, 450, 300, 200, 400, 250, 550, 450,
      ],
      line2SeriesData: [
        250, 550, 450, 300, 200, 400, 250, 550, 450, 300, 200, 400,
      ],
      pieSeriesData: [
        {
          name: '20岁以下',
          value: 11,
        },
        {
          name: '20-29岁',
          value: 22,
        },
        {
          name: '30-39岁',
          value: 33,
        },
        {
          name: '40-49岁',
          value: 44,
        },
        {
          name: '50岁以上',
          value: 55,
        },
      ],
    };

    barOption.xAxis.data = result.barXaxis;
    barOption.series.data = result.barSeriesData;
    lineOption.xAxis.data = result.lineXaxis;
    lineOption.series[0].data = result.line1SeriesData;
    lineOption.series[1].data = result.line2SeriesData;
    pieOption.series.data = result.pieSeriesData;
  }, 500);
});

watch(() => barOption.xAxis.data, () => {
  chart1Ref.value.setOption(barOption)
})
watch(() => lineOption.xAxis.data, () => {
  chart2Ref.value.setOption(lineOption)
})
watch(() => pieOption.series.data, () => {
  chart3Ref.value.setOption(pieOption)
})

</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>